<template>
	<view class="container">
		<cu-custom isBack isFixed :scrollColor="scrollColor">
			<block slot="content">查找门店</block>
		</cu-custom>
		<view class="banner-bg" :style="{ paddingTop: CustomBar + 'px' }"></view>
		<view class="hot-city">
			<view class="flex align-center text-lg text-green">
				<uni-icons type="location" color="rgb(0, 123, 70)" size="20"></uni-icons>
				<text class="margin-left-xs">福州</text>
			</view>
			<view class="text-lg margin-top-sm">热门城市</view>
			<view class="city-list">
				<view class="cu-tag lg" :class="index==currentCity?'active':''"
					v-for="(city, index) in 8" :key="index" @tap="selectCity(index)">北京</view>
			</view>
		</view>
		<view class="margin-lr padding bg-white radius-sm store-list">
			<view class="text-lg">
				附近的门店
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :fixed="false" height="500rpx"
				@down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view class="store-item" v-for="(store, index) in listData" :key="index">
					<view class="flex align-center justify-between">
						<view class="flex align-center text-lg">
							<uni-icons type="shop" color="rgb(217, 163, 130)" size="24"></uni-icons>
							<text class="margin-left-xs">龙舟店</text>
						</view>
						<view class="text-gray flex align-center">
							距您1500.28km
							<uni-icons type="location" color="#aaa" size="20"></uni-icons>
						</view>
					</view>
					<view class="margin-top-xs text-gray">
						地址：锦江区东光南二巷32号
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	export default {
		mixins: [MescrollMixin],
		components: { MescrollBody },
		data() {
			return {
				CustomBar: this.CustomBar,
				scrollColor: 'rgba(255, 255, 255, 0)',
				currentCity: -1,
				listData: [],
				downOption: {
					use: true,
					auto: false,
				},
				upOption: {
					auto: true,
					noMoreSize: 5,
					textNoMore: "更多门店筹备中...",
					page: {
						num: 0,
						size: 10,
					},
					empty: {
						icon: "/static/img/none.png",
						tip: "您所在的区域暂无可提供服务的门店",
					}
				},
			}
		},
		methods: {
			selectCity(index) {
				if(index !== this.currentCity) {
					this.currentCity = index
					this.downCallback()
				}
			},
			downCallback() {
				this.mescroll.resetUpScroll(true);
			},
			upCallback(page) {
				if(page.num == 1) this.listData = []
				setTimeout(() => {
					if(this.currentCity == 0) {
						this.mescroll.endBySize(0, 0)
						this.listData = []
					} else {
						this.mescroll.endBySize(10, 10)
						this.listData = this.listData.concat([1,2,3,4,5,6,7,8,9,10])
					}
				}, 3000)
			},
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			let opacity = (scrollTop/100)>1?1:(scrollTop/100)
			this.scrollColor = `rgba(255, 255, 255, ${opacity})`
		}
	}
</script>

<style scoped>
	.container {
		position: relative;
		min-height: 100vh;
		padding-bottom: calc(120rpx + constant( safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env( safe-area-inset-bottom));
	}
	.banner-bg {
		background-image: linear-gradient(rgb(0, 123, 70), rgb(247, 247, 247));
		height: 320rpx;
		box-sizing: content-box;
	}
	.hot-city {
		margin: -200rpx 30rpx 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.city-list {
		margin-top: 27rpx;
		display: grid;
		gap: 20rpx;
		grid-template-columns: repeat(4, 1fr);
	}
	.city-list .cu-tag {
		margin: 0;
		font-size: 32rpx;
		color: #999;
		border-radius: 10rpx;
	}
	.city-list .cu-tag.active {
		color: #fff;
		background-color: rgb(0, 123, 70);
	}
	.store-list {
		margin-top: 120rpx;
	}
	.store-item {
		padding: 20rpx 0;
	}
	.store-item + .store-item {
		border-top: 2rpx solid rgba(0, 0, 0, .1);
	}
</style>